<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/cart.css">
</head>

<body>
    <div class="cartTable">
        <table>
            <thead>
                <tr>
                    <th>全选</th>
                    <th>商品</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td><input type="checkbox" value="" class="select" ></td>
                    <td>
                        <img src="" >
                        <span style="font-size:14px;">小米手机</span>
                    </td>
                    <td><span>1999</span></td>
                    <td>
                        <button class="sub">-</button>
                        <input type="text" value="1" class="count">
                        <button class="add">+</button>
                    </td>
                    <td><span class="price">1999元</span></td>
                    <td><span class="del">删除</span></td>
                </tr> -->
            </tbody>
        </table>
        <div class="footer">
            <!-- <div class="left">
                <input type="checkbox" value="" class="allCheck" />
                <span class="dlAll">删除</span>
            </div>
            <div class="rirght">
                <div class="allNum">已选商品<b class="totalNum">0</b>件</div>
                <div class="allCount">合计 ￥<b class="money">0</b></div>
                <div class="calc">结算</div>
            </div> -->
        </div>
    </div>
    <script src="./js/cart.js "></script>
    <script>
        class Cart {
            constructor() {
                this.cartTable = document.querySelector('.cartTable')
                this.tbody = document.querySelector('tbody')
                this.footer = document.querySelector('.footer')
                this.list = JSON.parse(localStorage.getItem('list'))
                this.init()
            }
            init() {
                //渲染购物车基本结构和尾部结构
                this.render()
                this.addEvent()

            }
            //购物车主题渲染
            render() {
                //设置变量为计算总数和总价
                let counter=0;
                let totalPrice=0;
                //主题渲染
                //购物车为空
                if (!this.list.length) {
                    this.tbody.innerHTML = `
                        <tr height="100">
                            <td colspan='6'>
                            <h1>亲，您的购物车空空如也，赶紧去购物吧！<a href="./加入购物车.html">Go!<a></h1>    
                            </td >
                        </tr>`
                }
                //购物车不为空进行渲染 
                else {
                    //每次重新渲染前清空购物车
                    this.tbody.innerHTML = ''
                    this.list.forEach(item => {
                        this.tbody.innerHTML += `
                                <tr>
                                    <td>
                                        <input type="checkbox" value="" class="select"${item.is_select && 'checked'} data-id=${item.id}>
                                    </td>
                                    <td>
                                        <img src="${item.url}" >
                                        <span style="font-size:14px;">${item.title}</span>
                                    </td>
                                    <td>
                                        <spa>${item.price}</spa n></td>
                                    <td>
                                    <button class="sub"data-id=${item.id} ${item.cart_num === 1 && "disabled"}>-</button>
                                    <input type="text" value="${item.cart_num}" class="count"data-id=${item.id}>
                                    <button class="add"data-id=${item.id}>+</button>
                                    </td>
                                    <td><span class="price">${item.price * item.cart_num}</span></td>
                                    <td><span class="del"data-id=${item.id}>删除</span></td>
                                </tr>`
                                if(item.is_select){
                                    counter+=item.cart_num;
                                    totalPrice+=item.cart_num*item.price
                                    console.log(item.cart_num);
                                }
                    })
                }

                //当所有数组中的每一项is_select都为true时为true，即判断是否所有数据处于选中状态
                let isChecked = this.list.every(item => item.is_select)
                //当数组为空时，every方法默认返回为true,则需要手动修改为false
                if (!this.list.length) {
                    isChecked = false
                }
                //购物车尾部渲染
                this.footer.innerHTML = ''
                this.footer.innerHTML = `
                            <div class="left">
                                <input type="checkbox" value="" class="allCheck"${isChecked && 'checked'} />
                                <span class="dlAll">删除</span>
                            </div>
                            <div class="rirght">
                                <div class="allNum">已选商品<b class="totalNum">${counter}</b>件</div>
                                <div class="allCount">合计 ￥<b class="money">${totalPrice}</b></div>
                                <div class="calc">结算</div>
                            </div>`
                localStorage.setItem('list', JSON.stringify(this.list))
            }

            //绑定事件
            addEvent() {
                //进行委派，只有表单才有change事件，用于锁定改变表单所在事件
                this.cartTable.addEventListener('change', (e) => {
                    //target为点击的事件目标
                    let target = e.target || e.srcElement
                    //全选功能
                    if (target.className === 'allCheck') {
                        //获取当前全选框状态
                        let state=target.checked
                        //改变数据里的选中状态
                        this.list.forEach(item => {
                            item.is_select=state
                            // item.is_select = !item.is_select
                        })
                        // console.log(this.list);
                        this.render()
                    }
                    //单选功能
                    if (target.className === 'select') {
                        //获取当前数据
                        //获取当前数据的id
                        let id = target.dataset.id
                        console.log(id);
                        //通过find方法查找
                        let goods = this.list.find(item => item.id == id)
                        goods.is_select = !goods.is_select
                        this.render()
                    }
                    //输入框输入商品数量
                    if(target.className==='count'){
                        let id=target.dataset.id
                        let goods=this.list.find(item=>item.id==id)
                        goods.cart_num=target.value-0
                        this.render()
                    }

                })
                //对商品数量进行加减，通过对整体的点击事件委派，并对功能键添加自定义属性值为list的id属性，针对该自定义属性进行find方法找到所在的数据，并对该数据的num进行修改，最后再次渲染
                this.cartTable.addEventListener('click', (e) => {
                    let target = e.target;
                    //商品数量的增加
                    if (target.className === 'add') {
                        let id = target.dataset.id - 0
                        let goods = this.list.find(item => item.id === id)
                        goods.cart_num++;
                        this.render()
                    }
                    //商品减少
                    if (target.className === 'sub') {
                        let id = target.dataset.id - 0
                        let goods = this.list.find(item => item.id === id)
                        goods.cart_num--;
                        this.render()
                    }
                    //单独删除功能
                    if (target.className === 'del') {
                        let id = target.dataset.id - 0
                        let index = this.list.findIndex(item => item.id === id)
                        this.list.splice(index, 1)
                        this.render()
                    }
                    //批量删除
                    if(target.className==='dlAll'){
                        let res=this.list.filter(item=>item.is_select===false)
                        this.list=res
                        this.render()
                    }
                })
            }
        }

        new Cart()
    </script>
</body>

</html>